<!-- 搜索结果页 -->
<template>
  <div class="search-page">
    <el-row type="flex" justify="center">
      <el-col class="midFixedContent">
        <div style="height:140px"></div>

        <!-- 面包屑导航及搜索 -->
        <div class="breadcrumb-nav flex_ai_c flex_jc_sb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>搜索结果</el-breadcrumb-item>
          </el-breadcrumb>
          <el-input placeholder="请输入关键词搜索" v-model="searchData"   class="input-select">
            <el-button slot="append" icon="el-icon-search" @click="searchChange"></el-button>
          </el-input>
        </div>
        <!-- <el-row class="search-res-list"> -->
          <newsXiangqing v-if="isshowXiangqing" @WLxiangqingguanbi = "WLxiangqingguanbi" :Newxiangqingdata = "xiangqingdata"></newsXiangqing>

          	<WLNewsTable v-if="isRouterAlive && !isshowXiangqing" :Newdata="SearchList" :Newtotal = "total" :Newpagedangqianye = "pagedangqianye" :Newname = "2" @WLpageindex = "WLpageindex" @WLcellClick = "WLcellClick"></WLNewsTable>


        <!-- </el-row> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import WLNewsTable from '@/components/News/WLNewsTable.vue';
  import newsXiangqing from '@/components/News/newsXiangqing.vue';
  import { getSearchList } from "@/api/search.js";
  import { getnewsXaingqign } from "@/api/zhengcefagui.js";

var pageNo;
var pageSize;


export default {
  name: 'Search',
  components: {
  	WLNewsTable,
    newsXiangqing
  },
  data() {
    return {
      currentPage: 5,
      isRouterAlive: true,
      isshowXiangqing:false,
     total:0,//总条数
     pagedangqianye:1,//当前页
     SearchList:[],
     xiangqingdata:'',
     searchData:''

    }
  },
  computed: {},
  watch: {},
  methods: {

    getNewdata(){
          const _self = this;
            getSearchList({
              keyword:_self.searchData,
              pageNo:pageNo,
              pageSize:pageSize
             }).then((res) => {
               let { success, message } = res.data;
               if (success) {
                 // _self.$message.success(message);
                  _self.total = res.data.result.total;
                  _self.SearchList = [];
                  _self.SearchList =  res.data.result.records;
                  this.isRouterAlive = false
                  this.$nextTick(() => (this.isRouterAlive = true))


               } else {
                 _self.$message.error(message);
               }
             });




    },

    //进入详情
    WLcellClick(val) {
      const _self = this;
        getnewsXaingqign({
          id:val.id
         }).then((res) => {
           let { success, message } = res.data;
           if (success) {
             // _self.$message.success(message);

             this.xiangqingdata = res.data.result.content;


             this.isshowXiangqing = true;





           } else {
             _self.$message.error(message);
           }
         });









    },
    //监听页数
    WLpageindex(val){
    	pageNo = val;
    	this.pagedangqianye = pageNo;
    	this.getNewdata();
    },
    WLxiangqingguanbi(){
      this.isshowXiangqing = false;

    },
    searchChange() {
      if (this.searchData) {
         this.isshowXiangqing = false;
        pageNo = 1;
        this.pagedangqianye = 1;
        	this.getNewdata();

      } else {
        this.$message.error('请输入关键字搜索')
      }
    }

  },
  created() {
    pageNo = 1;
    pageSize = 15;

    this.searchData =  this.$route.query.keyword;
    this.getNewdata();
  },
  mounted() {},
  filters: {
    dateFilter: function (value) {
      if (value) {
        return +new Date(value).getDate()
      }
    }
  }
}
</script>

<style lang='less' scoped>

.pagination {
  margin-top: 20px;
}

.search-res-list {
  background-color: #fff;
  padding: 20px;
  margin: 14px 0;
  .date {
    width: 35px;
    height: 35px;
    background: #ebebeb;
    border-radius: 10px 0px 10px 0px;

    font-size: 16px;
    font-weight: bold;
    color: #1c3e95;
    line-height: 35px;
    text-align: center;
  }
}
.input-select {
  width: 330px;
}
.breadcrumb-nav {
  margin: 14px 0;
}
.search-page {
  background-color: #f2f2f2;
}
</style>
